<template>
	<div class="event-list">
		<h2>埋点事件配置</h2>
		<el-button
			class="add-btn"
			type="primary"
			icon="el-icon-circle-plus-outline"
			size="small"
			@click="onclickAddEvent"
		>
			添加埋点事件
		</el-button>
		<div class="table-container">
			<el-table
				ref="table"
				row-key="eventId"
				:data="eventList"
			>
				<el-table-column
					label="id"
					prop="eventId"
					width="80"
				/>
				<el-table-column
					label="事件名"
					prop="name"
					width="150"
				/>
				<el-table-column
					label="事件描述"
					prop="description"
				/>
				<el-table-column
					label="额外参数"
					prop="data"
				/>
				<!-- <el-table-column
					label="操作"
					align="center"
				>
					<template slot-scope="scope">
						<el-button
							style="width: 70px;"
							size="mini"
							@click="editEvent=scope.row"
						>
							编辑
						</el-button>
						<el-button
							size="mini"
							type="danger"
							@click="onclickDelEvent(scope.row.eventId)"
						>
							删除
						</el-button>
					</template>
				</el-table-column> -->
			</el-table>
			<!-- 分页器 -->
			<div class="pagination">
				<el-pagination
					background
					layout="prev, pager, next"
					:page-size="pageSize"
					:total="total"
					:current-page="pageNum"
					@current-change="loadEvents"
				/>
			</div>
		</div>

		<EditEvent
			v-if="editEvent"
			:event="editEvent"
			@close="editEvent=null"
			@updateEvent="updateEvent"
		/>
	</div>
</template>

<script>
import { getEventList, postEvent, putEvent, delEvent } from '@exploit/api/event'
import EditEvent from './components/EditEvent.vue'
export default {
  route: {
    meta: {
      login: true,
      showLeft: true,
      activeName: 'Event',
    },
  },
  components: {
    EditEvent
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      eventList: [],
      editEvent: null,
    }
  },
  created() {
    this.loadEvents()
  },
  methods: {
    /**
		 * 加载事件列表
		 */
    async loadEvents(pageNum = this.pageNum) {
      this.editEvent = null
      this.$loading()
      try {
        const res = await getEventList({
          pageNum,
          pageSize: this.pageSize,
        })

        this.eventList = res.data.pageData
        this.pageNum = pageNum
        this.total = res.data.total
        console.log(this.eventList)
      } catch (err) {
        console.log(err)
      }
      this.$hideLoading()
    },
    /**
		 * 添加事件
		 */
    async onclickAddEvent() {
      this.$loading()
      try {
        await postEvent({
          name: '新事件',
          description: '新事件',
          data: JSON.stringify({})
        })

        await this.loadEvents(1)
        this.editEvent = this.eventList[ 0 ]
      } catch (err) {
        console.log(err)
      }
      this.$hideLoading()
    },
    /**
		 * 删除事件
		 */
    onclickDelEvent(id) {
      this.$confirm('确认删除该埋点事件?', async() => {
        await delEvent(id)
        this.$warn('删除成功')
        this.loadEvents()
      })
    },
    /**
		 * 更新事件
		 */
    async updateEvent(event) {
      console.log(event)
      this.$loading()
      try {
        await putEvent(event)
        this.$success('更新成功')
        this.loadEvents()
      } catch (err) {
        console.log(err)
      }
      this.$hideLoading()
    }
  }
}
</script>

<style lang="scss" scoped>
.event-list {
  position: relative;
  padding: 20px;

  h2 {
    margin-bottom: 20px;
    color: $blue;
  }

  .add-btn {
    position: absolute;
    top: 20px;
    right: 10px;
  }

  .pagination {
    margin-top: 10px;
    text-align: right;
  }
}
</style>
